<!DOCTYPE html>
<html>
<head>
  <script src="three.min.js"></script>
  <script src="./lib/MTLLoader.js"></script>
  <script src="./lib/OBJLoader.js"></script>
  <!-- ---------------------------------------------------------------------------

    点光源
    THREE.PointLight(hex, intensity, distance)

      hex 是光源十六进制的颜色值
      intensity 是亮度，缺省值为1，表示100%亮度
      distance 是光源最远照射到的距离，缺省值为0

    平行光
    THREE.DirectionalLight(hex, intensity)

    聚光灯
    THREE.SpotLight(hex, intensity, distance, angle, exponent)

      angle 是聚光灯的张角，缺省值是Math.PI / 3，最大值是Math.PI / 2
      exponent 是光强在偏离 target 的衰减指数
      除了设置光源本身的位置，一般还需要设置 target
      light.position.set(x1, y1, z1);
      light.target.position.set(x2, y2, z2);

   ---------------------------------------------------------------------------- -->
  <script>
    function init() {
      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(500, 375);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColor(0x000000)
      let scene = new THREE.Scene();

      let camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, .01, 800)
      camera.position.set(2, 2, 3);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);

      // 点光
      var light = new THREE.PointLight(0xffffff, 2, 100);
      light.position.set(0, 1.5, 2);
      // scene.add(light);

      // 平行光
      var dlight = new THREE.DirectionalLight();
      dlight.position.set(2, 5, 3);
      scene.add(dlight);

      var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
          new THREE.MeshLambertMaterial({color: 0x00ff00}));
      greenCube.position.x = 3;
      scene.add(greenCube);

      var whiteCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
          new THREE.MeshLambertMaterial({color: 0xffffff}));
      whiteCube.position.x = -3;
      scene.add(whiteCube);

      renderer.render(scene, camera)
    }
  </script>
</head>
<body onload="init()">
</body>
</html>
